<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

onLoad(() => {})

const provinceList = ref([
  { text: '重庆', id: '0' },
  { text: '成都', id: '1' },
  { text: '北京', id: '2' },
  { text: '重庆', id: '0' },
  { text: '成都', id: '1' },
  { text: '北京', id: '2' },
  { text: '重庆', id: '0' },
  { text: '成都', id: '1' },
  { text: '北京', id: '2' },
])
const selectProvince = ref(provinceList.value[0].text)
const change1 = (e) => {
  if (e.text) {
    selectProvince.value = e.text
    console.log('change1', e)
  } else {
    selectProvince.value = '请选择省份'
  }
}

const guipopup3 = ref()
const openPop = () => {
  guipopup3.value.open()
  console.log(guipopup3.value)
}

const closePop = () => {
  guipopup3.value.close()
}

const toMenu = () => {
  uni.navigateTo({
    url: '/pages/SubjectSelectionAssistant/selectMenu/index',
  })
}
</script>

<template>
  <gui-page
    ref="guipage"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :loadmore="false"
    :refresh="false"
    style="background-color: white"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <gui-header-leading :back="true" :home="false" />
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">选科助手</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width: 120rpx" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gFixedTop>
      <!-- 分类导航 -->
    </template>
    <template #gBody>
      <view class="wh100p flex-column gui-relative favorites" style="flex: 1">
        <view class="gui-relative gui-flex1">
          <scroll-view class="gui-absolute-full gui-flex1" scroll-y style="background-color: white">
            <view class="assistantBox flex-column">
              <text class="title1">高考省份</text>
              <view
                class="w100p bgf1f1f1 flex-between mt10 column-center"
                style="border-radius: 20rpx; width: 90%; padding: 15rpx 25rpx"
                @tap="openPop"
              >
                {{ selectProvince }}
                <text class="gui-icons gui-block gui-color-gray gui-text" style="left: 5%; line-height: 28rpx; margin-left: 20rpx">
                  &#xe603;
                </text>
              </view>

              <text class="title2 mt40">高考年份</text>
              <view class="w100p bgf1f1f1 flex-between column-center mt10" style="border-radius: 20rpx; width: 90%; padding: 15rpx 25rpx">
                2026
                <text class="gui-icons gui-block gui-color-gray gui-text" style="left: 5%; line-height: 28rpx; margin-left: 20rpx">
                  &#xe603;
                </text>
              </view>

              <view class="w100p mt60">
                <button class="gui-button" :plain="true" style="border-radius: 40rpx" type="default" @click="toMenu">
                  <text class="gui-primary-color gui-button-text" style="line-height: 60rpx">下一步</text>
                </button>
              </view>
            </view>
          </scroll-view>
        </view>

        <gui-popup ref="guipopup3" position="bottom">
          <view style="height: 700rpx; background-color: white">
            <view class="gui-relative wh100p flex-column" style="padding: 10rpx; box-sizing: border-box">
              <!-- 关闭按钮 -->
              <view class="flex w100p column-center" style="justify-content: flex-end; height: 50rpx">
                <text class="gui-block demo-close gui-icons" style="font-size: 40rpx" @tap.stop="closePop">&#xe78a;</text>
              </view>
              <view class="gui-flex1" style="width: 95%; margin: 20rpx auto; height: 80%; overflow: scroll">
                <gui-stags
                  :line-height="3"
                  :padding="50"
                  :size="28"
                  :tags="[...provinceList, ...provinceList, ...provinceList]"
                  @change="change1"
                />
              </view>
            </view>
            <!-- iphone 底部适配 -->
            <gui-iphone-bottom :custom-class="['gui-bg-white', 'gui-dark-bg-level-3']" />
          </view>
        </gui-popup>
      </view>
    </template>
  </gui-page>
</template>

<style scoped>
.assistantBox {
  flex: 1;
  min-height: 100%;
  padding: 0 20rpx;
}

.assistantBox .title1 {
  margin-top: 30rpx;
  font-size: 36rpx;
}
</style>
